<html>

<head>
    <link rel="stylesheet" href="../../normalize.css">
    <link rel="stylesheet" href="../../index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="components-demo">
        <blog-post v-bind="post"></blog-post>
        <!--等价于-->
        <blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>
    </div>
</body>

<script type="text/javascript">
    Vue.component('blog-post', {
        props: ['title', 'id'],
        template: '<h3>{{id}} {{ title }}</h3>'
    })
    new Vue({
        el: '#components-demo',
        data: {
            post: {
                id: 1,
                title: "justin bieber is so hot",
                author: {
                    name: "justin bieber`s girlfriend"
                }
            }
        }
    });

</script>

</html>